<template>
	<view class="component">
		<view class="box">
			<input class="sousuo" placeholder="输入需要搜索的内容" v-model="text"></input>
			<image src="../../../static/image/搜索@3x.png" mode=""></image>
		</view>
		<view class="boxs">
			<view class="choose" @click="zhankai">{{order}} ᐯ</view>
			<view class="wrap">
				<view v-bind:style="xianshi" class="xiala"  v-for="(item, index) in data">
					<view v-model="t" @click="choose(index)" >{{data[index].msg}}</view>
				</view>
			</view>
		</view>
		
		<view class="docker" @click="toDetailStore">
			<view class="image">
				<image src="../../../static/logo.png" mode=""></image>
			</view>
			<view class="text">
				<view class="title">伟业汽车维修厂(人民路店)</view>
				<view class="star">
					<image src="../../../static/image/五星 拷贝.png" mode=""></image>
					<image src="../../../static/image/五星 拷贝.png" mode=""></image>
					<image src="../../../static/image/五星 拷贝.png" mode=""></image>
					<image src="../../../static/image/五星 拷贝.png" mode=""></image>
					<image src="../../../static/image/五星 拷贝.png" mode=""></image>
					5分  销量: 332
				</view>
				<view>营业时间: 周一至周五  09:00-22:00</view>
				<view>山阳区人民中路32号</view>
				<view class="distance">44m</view>
			</view>
		</view>
		
		<view class="docker">
			<view class="image">
				<image src="../../../static/logo.png" mode=""></image>
			</view>
			<view class="text">
				<view class="title">伟业汽车维修厂(人民路店)</view>
				<view class="star">
					<image src="../../../static/image/五星 拷贝.png" mode=""></image>
					<image src="../../../static/image/五星 拷贝.png" mode=""></image>
					<image src="../../../static/image/五星 拷贝.png" mode=""></image>
					<image src="../../../static/image/五星 拷贝.png" mode=""></image>
					<image src="../../../static/image/五星 拷贝.png" mode=""></image>
					5分  销量: 332
				</view>
				<view>营业时间: 周一至周五  09:00-22:00</view>
				<view>山阳区人民中路32号</view>
				<view class="distance">44m</view>
			</view>
		</view>
		
		<view class="docker">
			<view class="image">
				<image src="../../../static/logo.png" mode=""></image>
			</view>
			<view class="text">
				<view class="title">伟业汽车维修厂(人民路店)</view>
				<view class="star">
					<image src="../../../static/image/五星 拷贝.png" mode=""></image>
					<image src="../../../static/image/五星 拷贝.png" mode=""></image>
					<image src="../../../static/image/五星 拷贝.png" mode=""></image>
					<image src="../../../static/image/五星 拷贝.png" mode=""></image>
					<image src="../../../static/image/五星 拷贝.png" mode=""></image>
					5分  销量: 332
				</view>
				<view>营业时间: 周一至周五  09:00-22:00</view>
				<view>山阳区人民中路32号</view>
				<view class="distance">44m</view>
			</view>
		</view>
		
		<view class="bottom-title">暂无更多</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				color:'',
				xianshi:"visibility : hidden",
				order:'综合排序',
				text:'',
				data:[
					{msg: '距离最近'},
					{msg: '评分最高'},
					{msg: '销量最高'}
				]
			}
		},
		methods: {
			toDetailStore(){
				uni.redirectTo({
					url:"/pages/bfb-CheLiangWeiXiu/nearDetailStores/nearDetailStores"
				})
			},
			choose(row){
				console.log(this.data[row].msg);
				const message = this.order;
				this.order=this.data[row].msg;
				this.data[row].msg=message;
				this.xianshi="visibility : hidden";
				this.show=true;
				this.color='blue'
			},
			zhankai(){
				console.log(111);
				console.log(this.xianshi);
				if(this.xianshi=="visibility : visible"){
					this.xianshi="visibility : hidden";
				}else{
					this.xianshi="visibility : visible";
				}
			}
			
		}
	}
</script>

<style>
body{
	/* background-color: gainsboro; */
}
.box{
	background-color: gainsboro;
	padding: 1rpx 0;
}
.sousuo{
	margin: 15rpx auto;
	height: 60rpx;
	width: 650rpx;
	background-color: white;
	border-radius: 35rpx;
	padding: 0 20rpx;
}
.box image{
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	top: 23rpx;
	right: 55rpx;
}
.choose{
	width: 200rpx;
	padding: 5rpx 15rpx;
	font-size: 18px;
}
.xiala{
	width: 200rpx;
	background-color: white;
	padding: 5rpx 15rpx;
	font-size: 18px;
	border-bottom: 1px solid gainsboro;
}
.boxs{
	padding: 0 0 15rpx 0;
}
.wrap{
	position: absolute;
	top: 135rpx;
	left: 0;
}
.docker{
	display: flex;
	height: 220rpx;
	align-items: center;
	padding: 10rpx 20rpx;
	
}
.title{
		font-size: 35rpx;
		font-weight: bolder;
}
.star image{
		width: 35rpx;
		height: 35rpx;
		margin: 0 5rpx;
}
.image{
	margin-right: 20rpx;
}
.image image{
	width: 190rpx;
	height: 190rpx;
}
.text{
	/* margin-left: 15rpx; */
	position: relative;
}
.distance{
	color: cornflowerblue;
	position: absolute;
	top: 0;
	right: -60rpx;
}
.bottom-title{
	padding: 15rpx 0 0 0;
	width: 100%;
	text-align: center;
	font-size: 35rpx;
}
	
</style>
